<template>
  <el-container>
    <el-aside width="200px">

    </el-aside>
    <el-main>
      <VueFlow :nodes="initNodes" :edges=initEdges fit-view-on-init class="my-diagram-class" @edges-change="onChange">
        <template #node-custom="nodeProps">
          <CustomNodeTool :data="nodeProps.data" :label="nodeProps.label"/>
        </template>
        <Controls/>
        <BezierEdge v-bind="props"/>
        <Background :height="100" :width="100" :size="0.3"/>
        <MiniMap>
          <template #node-input="props">
            <MiniMapNode v-bind="props"/>
          </template>
        </MiniMap>
        <div style="z-index: 1">
          <el-button type="success" @click="onAddNode">添加节点</el-button>
        </div>
      </VueFlow>
    </el-main>
  </el-container>


  <el-drawer v-model="ModiyNode" title="修改节点" direction="rtl" size="20%">
    <el-form>
      <el-form-item label="内容">
        <el-input v-model="curnode.label"></el-input>
      </el-form-item>
      <el-form-item label="宽">
        <el-button @click="curnode.width++"></el-button>
      </el-form-item >
      <el-form-item label="高">
        <el-input v-model="curnode.height"></el-input>
      </el-form-item>

      <el-form-item label="背景颜色">
        <el-input v-model="curnode.backgroundColor"></el-input>
      </el-form-item>
    </el-form>
  </el-drawer>

  <div id="custom-menu">
    <ul>
      <li>
        <el-button type="success" link>运行</el-button>
      </li>
      <li>
        <el-button type="warning" link>停止</el-button>
      </li>
      <li>
        <el-button type="info" link @click="removeNode">删除</el-button>
      </li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
import {onMounted, ref} from 'vue'
import type {Elements} from '@vue-flow/core'
import {BezierEdge, EdgeProps, useNode, useVueFlow, VueFlow} from '@vue-flow/core'
import {Background} from '@vue-flow/background'
import {MiniMap} from '@vue-flow/minimap'

import {Controls} from '@vue-flow/controls'

import '@vue-flow/core/dist/style.css';
import '@vue-flow/controls/dist/style.css'
import '@vue-flow/node-resizer/dist/style.css'
import '@vue-flow/core/dist/theme-default.css';
import '@vue-flow/minimap/dist/style.css'

import CustomNodeTool from "@/view/dashboard/tools/flow/CustomNodeTool.vue";


onMounted(() => {
  var tree = document.getElementsByClassName("my-diagram-class")[0];
  tree.addEventListener('contextmenu', function (event) {
    event.preventDefault(); // 取消默认的右键菜单行为
  })

  document.addEventListener('keydown', function (event) {
    if (event.keyCode == 46) {
      removeEdge()
    }
  })


  var customMenu = document.getElementById("custom-menu");
  customMenu.addEventListener('mouseleave', function (event) { //鼠标移除弹出框后退出
    if (event.button === 1 || event.button == 0) { // event.button表示按下的鼠标按钮编号，2表示右键
      customMenu.style.display = "none";
    }
  });
})


const initNodes =ref<Elements>([
  {id: '1', label: '重启', position: {x: 250, y: 5}, class: 'light'},
  {id: '2',  label: '下电', position: {x: 450, y: 5}, class: 'light'},

  {id: '3', label: "检查vip是否切换", position: {x: 100, y: 100}, class: 'light'},
  {id: '4', label: '检查磁盘组状态', position: {x: 500, y: 100}, class: 'light'},

  {id: '5', label: '恢复故障', position: {x: 300, y: 200}, class: 'light'},

  {id: '6', label: "检查vip是否回切", position: {x: 100, y: 300}, class: 'light'},
  {id: '7', label: '检查磁盘组状态', position: {x: 400, y: 300}, class: 'light'},

])

const initEdges = ref([
  {id: 'e1-3', source: '1', target: '3', animated: true},
  {id: 'e1-4', source: '1', target: '4', animated: true},

  {id: 'e3-5', source: '3', target: '5', type: 'special',},
  {id: 'e4-5', source: '4', target: '5', type: 'special',},

  {id: 'e5-6', source: '5', target: '6', type: 'special',},
  {id: 'e5-7', source: '5', target: '7', type: 'special',},
])


const props = defineProps<EdgeProps>()


const {
  addNodes,
  onNodeDragStart,
  onNodeDrag,
  onNodeDragStop,
  onNodeClick,
  onNodeDoubleClick,
  onNodeContextMenu,
  onNodeMouseEnter,
  onNodeMouseLeave,
  onNodeMouseMove,
  onPaneReady,
  onConnect,
  nodes,
  edges,
  addEdges,
  removeEdges,
  removeNodes,
  onEdgeClick,
  onEdgeDoubleClick,
  onEdgeContextMenu,
  onEdgeMouseEnter,
  onEdgeMouseLeave,
  onEdgeMouseMove,
  onEdgeUpdateStart,
  onEdgeUpdate,
  onEdgeUpdateEnd,
} = useVueFlow()


const {node} = useNode()
const ModiyNode = ref(false)
const curnode = ref(null)
const x = ref(0)
const y = ref(0)
const select_edge = ref(null)
const select_node = ref(null)


onNodeDragStart((event) => {})

onNodeDrag((event) => {})

onNodeDragStop((event) => {})

onNodeMouseEnter((event) => {})

onNodeMouseLeave((event) => {})

onNodeClick((event) => {
  select_node.value = event.node
})

onNodeDoubleClick((event) => {
  curnode.value = event.node
  ModiyNode.value = true
})

onNodeContextMenu((event) => {
  var customMenu = document.getElementById("custom-menu");
  customMenu.style.left = x.value + 'px';
  customMenu.style.top = y.value - 100 + 'px';
  customMenu.style.display = "block";
})

document.addEventListener('mousemove', function (event) {
  x.value = event.screenX;
  y.value = event.screenY;
});


// bind listeners to the event handlers
onEdgeClick((event) => {
  select_edge.value = event.edge
})


const removeEdge = () =>{
  removeEdges(select_edge.value)
}

const removeNode = () =>{
  removeNodes(select_node.value)
}

onEdgeDoubleClick((event) => {

})

onEdgeContextMenu((event) => {

})

function generateRandomNode() {
  return {
    id: Math.random().toString(),
    position: {x: Math.random() * 500, y: Math.random() * 500},
    label: 'Node',
  }
}


function onAddNode() {
  // add a single node to the graph
  addNodes(generateRandomNode())
}

function onAddNodes() {
  // add multiple nodes to the graph
  addNodes(Array.from({length: 3}, generateRandomNode))
}

const onChange = (changes) => {
}
const isHidden = ref(false);

onPaneReady(({ fitView }) => {
  fitView();
});

onConnect((params) => addEdges([params]));

</script>

<style scoped>
/* Use a purple theme for our custom node */
.my-diagram-class {
  background: #f0f6ec;
  color: #cbc7c7;
  border: 1px solid #d0c6d0;
  border-radius: 5px;
  padding: 8px;
  height: 95%;
}


:deep(.vue-flow__node) {
  background: #e2e5bc;
}

#custom-menu {
  display: none; /* 初始状态下不显示 */
  position: absolute;
  background-color: #f9f9f9;
  font-family: 微软雅黑;
  z-index: 999;
  min-width: 100px;
  border-radius: 10px;
  box-shadow: 3px 3px 4px rgba(241, 235, 235, 0.2);
}

#custom-menu ul li {
  padding: 8px 16px;
  cursor: pointer;
  list-style: none;
}

#custom-menu ul li:hover {
  background-color: rgba(243, 236, 236, 0.92);
}


:deep(.vue-flow__node){
  background-color: #d0c6d0;
  padding: 4px 4px;
  height: 30px;
  width: 60px;
  font-size: 9px;
  overflow: hidden;
  display: inline-block; /* 或者使用 'table' */
  --vf-node-color: #d0c3d0
}

:deep(.vue-flow__node > div:nth-child(2)) {
  height: 26px;
  width: 46px;
}

:deep(.vue-flow__node.selected){
  background-color: #f5d1d1;
}
</style>